<template>
    <vpic_layout>
        <el-card>
            {{project.name}} {{report.created_at}} 所有截图
        </el-card>

        <el-card v-if="schedules.length === 0">
            没有截图记录
        </el-card>
        <template v-else v-for="schedule in schedules">
            <el-card>
                <div slot="header">
                    主播：<a target="_blank" :href="schedule.anchor.url">{{schedule.anchor.name}}</a><br>
                    平台：{{schedule.platform.name}}<br>
                </div>
                <div v-if="schedule.image">
                    硬广截图<br/>
                    <a target="_blank" :href="aliasPlatformFile(schedule)">
                        <img :src="aliasPlatformFile(schedule)">
                    </a>
                </div>
                <hr>
                <div>主播截图</div>
                <div class="image-list">
                    <template v-for="image in schedule.images">
                        <a target="_blank"
                           :href="aliasAnchorFile(schedule, image)">
                            <img :src="aliasAnchorFile(schedule, image)" :class="{active:!!image.selected}">
                        </a>
                    </template>
                </div>
            </el-card>
        </template>
    </vpic_layout>
</template>

<script>
    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import moment from 'moment';
    import 'element-ui/lib/theme-chalk/index.css';

    import Vpic_layout from "../../component/layout/vpic";

    Vue.use(ElementUI);
    export default {
        components: {
            Vpic_layout,
        },
        methods: {
            /**
             * 主播截图文件重命名
             * */
            aliasAnchorFile(schedule, image) {
                console.log('aliasAnchorFile', image);
                let time = moment(image.created_at).format('YYYY年MM月DD日HH点mm分ss秒');
                return `/pic/${image.file}/${this.project.name}-${schedule.platform.name}-${schedule.anchor.name}-${time}.jpeg`;
            },
            /**
             * 平台截图重命名
             */
            aliasPlatformFile(schedule) {
                let file = schedule.image.file;
                let time = moment(schedule.image.created_at).format('YYYY年MM月DD日HH点mm分ss秒');
                return `/pic/${file}/${this.project.name}-${schedule.platform.name}-${time}.jpeg`;
            }
        },
        computed: {},
        mounted() {
            document.title = this.project.name + ' - ' + this.report.created_at + ' 所有截图';
            console.log(this.schedules);
        }
    }
</script>

<style scoped>
    .image-list {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
    }

    img {
        border: 4px solid transparent;
    }

    img.active {
        /*border-color: #67C23A;*/
    }

    /*手机*/
    @media (max-width: 500px) {
        #app {
            margin: 0 10px;
        }

        .el-card {
            margin: 10px 0 0 0;
        }

        img {
            height: 60px;
        }

        .image-list {
            height: 90px;
        }
    }

    /*电脑*/
    @media (min-width: 600px) {
        #app {
            margin: 0 20px;
        }

        .el-card {
            margin: 20px 0 0 0;
        }

        img {
            height: 100px;
        }

        .image-list {
            height: 130px;
        }
    }
</style>